﻿@{
    ViewData["Title"] = "天气查询测试";
}

<div class="container mt-4">
    <h2>天气查询测试页面</h2>

    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5>测试天气查询</h5>
                </div>
                <div class="card-body">
                    <div class="form-group">
                        <label>纬度:</label>
                        <input type="number" id="testLat" class="form-control" value="31.2304" step="0.0001">
                    </div>
                    <div class="form-group">
                        <label>经度:</label>
                        <input type="number" id="testLng" class="form-control" value="121.4737" step="0.0001">
                    </div>
                    <button type="button" id="testQuery" class="btn btn-primary mt-3">测试查询</button>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5>测试结果</h5>
                </div>
                <div class="card-body">
                    <div id="testResult">
                        <p class="text-muted">点击测试查询按钮查看结果</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script>
        $(document).ready(function() {
            $('#testQuery').click(function() {
                const lat = parseFloat($('#testLat').val());
                const lng = parseFloat($('#testLng').val());

                if (!lat || !lng) {
                    $('#testResult').html('<p class="text-danger">请输入有效的经纬度</p>');
                    return;
                }

                $('#testResult').html('<p>正在查询...</p>');

                $.ajax({
                    url: '/Weather/GetWeather',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({
                        latitude: lat,
                        longitude: lng
                    }),
                    success: function(response) {
                        if (response.success) {
                            $('#testResult').html(`
                                <div class="alert alert-success">
                                    <h6>查询成功!</h6>
                                    <p>位置: ${response.data.location || '未知'}</p>
                                    <p>当前温度: ${response.data.current?.temperature || '未知'}°C</p>
                                    <p>天气: ${response.data.current?.weather || '未知'}</p>
                                    <p>预报天数: ${response.data.forecasts?.length || 0} 天</p>
                                </div>
                            `);
                        } else {
                            $('#testResult').html(`
                                <div class="alert alert-danger">
                                    <h6>查询失败!</h6>
                                    <p>错误信息: ${response.message}</p>
                                </div>
                            `);
                        }
                    },
                    error: function(xhr, status, error) {
                        $('#testResult').html(`
                            <div class="alert alert-danger">
                                <h6>网络错误!</h6>
                                <p>状态: ${status}</p>
                                <p>错误: ${error}</p>
                                <p>响应: ${xhr.responseText}</p>
                            </div>
                        `);
                    }
                });
            });
        });
    </script>
}
